<template>
  <div>
    <PageHeader class="p10 border-bottom">
      <div class="flex_aic">
        <div class="fs-14 font-600">{{ t('trade.交易报表') }}</div>
      </div>
      <template #right>
        <!-- <el-button type="primary" size="small">
          <SvgIcon name="iconziyuan23" color="#fff" />
          <span class="ml4">{{ t('trade.导出报表') }}</span>
        </el-button> -->
      </template>
    </PageHeader>
    <div class="p10">
      <DatePick class="mb12" @change="changeDate" />
      <el-table
        :data="tableData"
        style="width: 100%"
        class="cover-table"
        border
        :default-sort="{
          prop: 'orderCount',
          order: 'descending',
        }"
        :loading="loading"
        :key="tableKey"
        @sort-change="handleSortChange"
        height="500"
      >
        <el-table-column :prop="'time'" :label="t('trade.时间')" sortable />
        <el-table-column :prop="'saleCreateCount'" :label="t('trade.下单数')" sortable>
          <template #default="scope">
            {{ scope.row.orderCount }}
          </template>
        </el-table-column>
        <el-table-column :prop="'xxx'" :label="t('trade.下单人数')" sortable>
          <template #default="scope">
            {{ scope.row.xxx }}
          </template>
        </el-table-column>
        <el-table-column :prop="'saleCreateAmount'" :label="t('trade.下单金额')" sortable>
          <template #default="scope">
            ¥{{ scope.row.orderAmount?.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column :prop="'saleCount'" :label="t('trade.支付订单数')" sortable>
          <template #default="scope">
            {{ scope.row.saleCount }}
          </template>
        </el-table-column>
        <el-table-column :prop="'xxx'" :label="t('trade.支付人数')" sortable>
          <template #default="scope">
            {{ scope.row.xxx }}
          </template>
        </el-table-column>
        <el-table-column :prop="'saleAmount'" :label="t('trade.支付金额')" sortable>
          <template #default="scope">
            ¥{{ scope.row.saleAmount?.toFixed(2) }}
          </template>
        </el-table-column>
        <!-- <el-table-column :prop="'payRate'" :label="t('trade.支付转化率')" sortable>
          <template #default="scope"> {{ scope.row.payRate }}% </template>
        </el-table-column> -->
      </el-table>

      <!-- <div class="pagination-container">
        <el-pagination
          v-model:current-page="reportCurrentPage"
          v-model:page-size="reportPageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="reportTotal"
          @size-change="handleReportSizeChange"
          @current-change="handleReportCurrentChange"
        />
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { useI18n } from "vue-i18n";
import DatePick from "@/components/datePick.vue";
import Api from "@/config/api/api";
import moment from "moment";

const { t, locale } = useI18n();

const date = ref([]);
const sort = ref("saleAmountDesc");
const loading = ref(false);
const tableData = ref([]);
const tableKey = ref(0);
const tableDefaultSort = ref({
  prop: "saleAmount",
  order: "descending",
});
const changeDate = (v) => {
  date.value = v;
  getDataList();
};
const getDataList = () => {
  loading.value = true;
  const params = {
    startDate: date.value[0].substring(0, 10),
    endDate: date.value[1].substring(0, 10),
    sort: sort.value,
    type: 2,
  };
  Api.saleTrend(params)
    .then((res) => {
      tableData.value = res.data;
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleSortChange = ({ column, prop, order }) => {
  // 排序 saleAmountAsc销售额升序 saleAmountDesc销售额降序 saleCountAsc订单量升序 saleCountDesc订单量降序
  let _sort = "";
  if (prop === "saleAmount") {
    _sort = order === "ascending" ? "saleAmountAsc" : "saleAmountDesc";
  } else if (prop === "saleCount") {
    _sort = order === "ascending" ? "saleCountAsc" : "saleCountDesc";
  }
  sort.value = _sort;
  getDataList();
};
</script>
<style lang="scss" scoped></style>
